<template>
  <div class="addressPopup">
    <nut-popup
      position="bottom"
      :style="{ height: '60%' }"
      v-model:visible="showBottom"
      lock-scroll:true
      :z-index="2002"
    >
      <div class="paddingBox">
        <div class="popTop jscenter">
          <p>请选择{{ options.myTitle }}</p>
          <nut-image
            :src="getAssetsFile('home/closeIcon.png')"
            @click="closeDialog"
          />
        </div>
        <div
          class="addressItem"
          v-for="(address, index) in options.list"
          :key="index"
        >
          <addressCard :address="address" @click="choseAddress(address)">
            <template #chose>
              <nut-image
                v-if="currentSelect == address.id"
                class="hasChoseIcon"
                :src="getAssetsFile('home/payOrder/chosePay.png')"
              ></nut-image>
              <nut-image
                v-else
                class="noChoseIcon"
                :src="getAssetsFile('home/payOrder/noChose.png')"
              ></nut-image>
            </template>
          </addressCard>
        </div>
      </div>
      <template v-if="options.list?.length > 0">
        <fullFoot :title="'确定'" @click-btn="confirm"></fullFoot>
      </template>
      <template v-else>
        <fullFoot
          :title="'新建' + options.myTitle"
          @click-btn="addNew"
        ></fullFoot>
      </template>
    </nut-popup>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { getAssetsFile, isRes } from "@/utils/pub-use";
import addressCard from "@/components/addressCard/index.vue";
import fullFoot from "@/views/home/groupLink/components/fullFoot.vue";
let showBottom = ref<boolean>(false);
let currentSelect = ref<number | null>(null);
const props = defineProps<{ options: any }>();
const emits = defineEmits(["save", "add"]);
const openDialog = () => {
  showBottom.value = true;
};
const closeDialog = () => {
  showBottom.value = false;
  currentSelect.value = null;
};
const choseAddress = (address: any) => {
  currentSelect.value = address.id;
};
const confirm = () => {
  let payload = "";
  props.options.list.map((address: any, index: number) => {
    if (currentSelect.value == address.id) {
      payload = address;
    }
  });
  emits("save", payload);
};

const addNew = () => {
  emits("add", props.options);
};
defineExpose({ openDialog, closeDialog });
</script>

<style lang="scss" scoped>
.addressPopup {
  :deep(.popup-bottom) {
    border-radius: 40px 40px 0px 0px;
  }
  .paddingBox {
    padding: 30px;
    .popTop {
      padding-bottom: 30px;
      border-bottom: 1px solid #eeeeee;
      p {
        font-weight: 500;
        font-size: 32px;
      }
      .nut-image {
        width: 26px;
        height: 26px;
      }
    }
    .addressItem {
      margin-top: 20px;
      padding: 0 30px;
      border-bottom: 1px solid #eeeeee;
      .hasChoseIcon,
      .noChoseIcon {
        width: 36px;
        height: 36px;
        margin-right: 34px;
      }
    }
    .addressItem:nth-child(1) {
      margin-top: 0;
    }
  }
}
</style>
